<!DOCTYPE html>
<html>
<head>
<title>详情</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Pasta Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />

<!-- //for-mobile-apps -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style2.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/camera.min.js"></script>
	<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
 <script src="js/gghc.js"></script>
<!-- //js -->

<!-- start-smoth-scrolling -->

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>
	
<body>
<div id="app">
<!-- header -->
	<my-header></my-header>
<!-- //header -->
<!-- single -->
	<div class="single">
	<div class="container">
		<h3>{{dish.name}}</h3>
		<div class="single-left">
			<p>上传日期： <span>{{dish.time.date.year}}-{{dish.time.date.month}}-{{dish.time.date.day}}</span></p>
			<div><img alt="无法渲染" :src="dish.image" class="img-responsive" /></div>
		</div>
		<div class="single-right">
			<h4>制作食材以及小提示</h4>
			<p><span> 主 料 ：{{dish.material}}</span>
			<br>
			<span> 辅 料 ：{{dish.excipient}}</span></p>
			<br>
			<p class="tortor"> 步 骤 过 程 ：{{dish.tips}}</p>
			<br>
		</div>
		<div class="clearfix"> </div>

		<div class="tags-cate">
			<div class="cat-grid">
				<h3>分类</h3>
				<ul>
					<li><a href="#">{{kname.kname}}</a></li>
				</ul>
			</div>
			<div class="cat-grid">
				<h3><span>Time</span>时间</h3>
				<ul>
					<li><a href="#">{{dish.time.date.year}}-{{dish.time.date.month}}-{{dish.time.date.day}}</a></li>
				</ul>
			</div>
			<div class="cat-grid">
				<h3>标签</h3>
				<div class="top-social-icons">
						<a href="#">{{dish.tag1}}</a>
						<a href="#">{{dish.tag2}}</a>
						<a href="#">{{dish.tag3}}</a>

				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="three-com">
			<h3>3 条 <span>对</span> <label>{{dish.name}} 的 评 价</label></h3>
			<div class="tom-grid">
				<div class="tom">
					<img src="images/icon1.png" alt=" " />
				</div>
				<div class="tom-right">
					<div class="Hardy">
						<h4>Tom Hardy</h4>
						<p><label>2020-12-21</label></p>
					</div>
					<div class="reply">
						<a href="#">REPLY</a>
					</div>
					<div class="clearfix"> </div>
					<p class="lorem">好吃</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="tom-grid humour">
				<div class="tom">
					<img src="images/icon1.png" alt=" " />
				</div>
				<div class="tom-right">
					<div class="Hardy">
						<h4>Prad Pitt</h4>
						<p><label>18 July 2021</label></p>
					</div>
					<div class="reply">
						<a href="#">REPLY</a>
					</div>
					<div class="clearfix"> </div>
					<p class="lorem">There are many variations of passages of Lorem Ipsum available,
					but the majority have suffered alteration in some form, by injected humour, 
					or randomised words which don't.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="tom-grid">
				<div class="tom">
					<img src="images/icon1.png" alt=" " />
				</div>
				<div class="tom-right">
					<div class="Hardy">
						<h4>Tom Cruis</h4>
						<p><label>20 July 2021</label></p>
					</div>
					<div class="reply">
						<a href="#">REPLY</a>
					</div>
					<div class="clearfix"> </div>
					<p class="lorem">There are many variations of passages of Lorem Ipsum available,
					but the majority have suffered alteration in some form, by injected humour, 
					or randomised words which don't.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	</div>
<!-- //single -->
<!--- footer --->
	<my-footer></my-footer>
<!--- //footer --->
<!-- for bootstrap working -->
		<script src="js/bootstrap.js"> </script>
<!-- //for bootstrap working -->
<script>
	var v = new Vue({
		el : "#app",
		data : { dish : {}/*该菜品的所有数据*/
			,viewsnum : {}/*浏览量*/
			,kname : {}/*类名*/},
		created(){
			let url = "getDish.s?id=";
			// /detail.html?id=200001
			let id = location.search.replace(/\?id=(\d+)/,"$1");
			url += id;
			// url = getDish.s?id=200001
			axios.get(url).then(res=>{
				this.dish = res.data;
			});
			axios.get("views.s?id="+id);
			axios.get("kname.s?id="+id).then(res=>{
				this.kname = res.data;
			});
		},

	})
</script>
<script type="application/x-javascript">
	addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
	function hideURLbar(){
		window.scrollTo(0,1);
	}
</script>
</div>
</body>
</html>